<template>
  <div class="page-header">
    <a-flex vertical>
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item v-for="item in breadcrumbData" :key="item">{{item}}</a-breadcrumb-item>
      </a-breadcrumb>
      <a-flex vertical>
        <div class="main">
          <div class="title" v-if="title">{{title}}</div>
          <div class="content" v-if="title">{{ content }}</div>
        </div>
        <slot name="header"></slot>
      </a-flex>
    </a-flex>
  </div>
  <div class="container">
    <slot></slot>
  </div>
</template>

<script setup>
import { reactive, defineProps, toRefs } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
const store = useStore()
const route = useRoute()
let breadcrumbData = reactive([])

const props = defineProps({
  title: String,
  content: String,
})
let {title, content} = toRefs(props)

// 获取面包屑数据
store.dispatch('menu/getMenuInfo', {
  fullPath: route.path
}).then((result) => {
  result.forEach(e => {
    breadcrumbData.push(e)
  });
});
</script>

<style lang="less" scoped>
.page-header{
  background: #fff;
  padding: 16px 24px;
  .breadcrumb{
    margin-bottom: 20px;
  }
  .main{
    width: 100%;
    .title{
      font-size: 20px;
      color: rgba(0,0,0,.85);
      margin-bottom: 16px;
    }
    .content{
      font-size: 14px;
      color: rgba(0,0,0,.45);
    }
  }
}
.container{
  padding: 24px 12px 0 12px;
}
</style>